<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery</title>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
    <table>
        <tr>
            <td>留言</td>
            <td id="number"> 0 </td>
        </tr>
        <tr>
            <td colspan=2>
                <textarea id="feedBack" onkeyup="test()" rows=6></textarea>
            </td>
        </tr>
    </table>
    <script>
        /*
        10、题目描述
        
        在下面的HTML文档中，编写函数test() ,实现如下功能：
        
        （1）当多行文本框中的字符数超过20个，只截取20个字符
        
        （2）在id为number的td中显示文本框的字符个数
        
        HTML结构如下：
        */
        function test(){
            // if () {
                
            // }
            // var text  = $('#feedBack').val().slice(0,20);
            var bb = $('#feedBack').val().split('')
            console.log(bb.length);
            
        }
        console.log(`======= 第10题 =======`);
        /*
        7、题目描述
        用jQuery编程实现获取选中复选框值的函数abc
        HTML结构如下：
        <div>
        <input type="checkbox" name="aa" value="0" />0
        <input type="checkbox" name=" aa " value="1" />1
        <input type="checkbox" name=" aa " value="2" />2
        <input type="checkbox" name=" aa " value="3" />3
        <input type="button" onclick="abc()" value="提 交" />
        <div id="allselect">张正豪</div>
    </div>
        */
    //    function abc() {
    //     var a = $('div').children();
    //     var bb = '';
    //     for (let i = 0; i < a.length; i++) {
    //         if ($(a[i]).is(':checked')) {
    //             bb +=$(a[i]).val() + '\n';
    //         }
            
            
    //     }
    //     console.log($('#allselect').text(bb)); 
        
    //    }

        console.log(`======= 第7题 =======`);
          /*
        8、题目描述
        实现sel函数显示当前选项的文本和值
        <div>
        <form name="a">
            <select name="a" size="1" onchange="getOptionVal()">
            <option value="a">1</option>
            <option value="b">2</option>
            <option value="c">3</option>
            </select>
        </form>
    </div>
        */
    //     function getOptionVal(){
    //         var a = $('select').children();
    //         for (let i = 0; i < a.length; i++) {
    //             if (a[i].selected) {
    //                 window.alert($(a[i]).text())
    //             }

                
    //         }
    // }
    console.log(`======= 第8题 =======`);
    /*
        9、题目描述
        要求用jQuery完成:  点击id为btn的按钮
        
        a.判断id为username的输入是否为空，如果为空，则弹出“用户名不能为空”的提示。
        
        b.判断id为password的输入字符串个数是否小于6位，如果小于6位，则弹出“你输入的密码长度不可以少于6位”的提示
        
        HTML结构如下：
        <div>
        用户名：<input type="text" id="username"/><br/>
        密  码：<input type="password" id="password"/><br/>
       确认密码：<input type="password" id="password1"/><br/>
        <button id="btn" type="button">提交</button><br/>
    </div>
        
        */
        // $('#btn').click(function aa() {
        //     if ($('#username').val() == '') {
        //         window.alert('用户名不能为空')
        //     }
        //    var bb =  $('#password').val().split('')
        //     if (bb.length < 6) {
        //         window.alert('你输入的密码长度不可以少于6位')
        //     }
        // })
        console.log(`======= 第9题 =======`);
    </script>
</body>
</html>